<template>
  <el-dialog
    title="成员列表"
    :visible.sync="isshow"
    width="800px"
  >
    <div>
      <!-- 搜索项 -->
      <div class="search_bar">
        <el-form size="small" :inline="true" label-width="68px">
          <el-form-item label="成员">
            <el-input
              style="width: 130px;"
              v-model="sea_form.memberName"
              placeholder="请输入"
              clearable
              @keyup.enter.native="getdataBysearch"
            />
          </el-form-item>
          <el-form-item label="工号">
            <el-input
              style="width: 130px;"
              v-model="sea_form.memberNo"
              placeholder="请输入"
              clearable
              @keyup.enter.native="getdataBysearch"
            />
          </el-form-item>
          <el-form-item label="角色" v-if="groupType==0">
            <el-select
              style="width: 130px;"
              placeholder="请选择"
              v-model="sea_form.userType"
              filterable
            >
              <el-option
                v-for="item in levelOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="角色" v-else>
            <el-select
              style="width: 130px;"
              placeholder="请选择"
              v-model="sea_form.userType"
              filterable
            >
              <el-option
                v-for="item in levelOptionsNoAdmin"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select
              style="width:130px;"
              placeholder="请选择"
              v-model="sea_form.activateStatus"
              filterable
            >
              <el-option
                v-for="item in activeStatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item class="search_btns">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="getdataBysearch"
            >搜索
            </el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetSearch"
            >重置
            </el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <el-table
        :data="memberList"
        style="width: 100%"
      >
        <el-table-column
          prop="nickName"
          label="成员"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="teacherNum"
          label="工号"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="level"
          label="角色"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.userType===0">成员</span>
            <span v-if="scope.row.userType===1">管理员</span>
            <span v-if="scope.row.userType===2">群主</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="activateStatus"
          label="状态"
          align="center"
        >
          <template slot-scope="scope">
            <span :class="scope.row.activateStatus==1?'statuOpen':'statuClose'"
            >{{ scope.row.activateStatus == 1 ? '已开通' : '未开通' }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="sea_form.pageNum"
        :limit.sync="sea_form.pageSize"
        @pagination="getList"
        :pager-count="5"
      />
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="isshow = false">关 闭</el-button>
  </span>
  </el-dialog>
</template>
<script>
import { getmemberList } from '@/api/library_groupList/groupList'

export default {
  name: 'groupmember',
  data() {
    return {
      isshow: false,
      form: {},
      memberList: [],
      total: 30,
      activeStatusOptions: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '已开通',
          value: 1
        },
        {
          label: '未开通',
          value: 0
        }
      ],
      levelOptions: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '群主',
          value: 2
        },
        {
          label: '管理员',
          value: 1
        },
        {
          label: '成员',
          value: 0
        }
      ],
      levelOptionsNoAdmin: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '管理员',
          value: 1
        },
        {
          label: '成员',
          value: 0
        }
      ],
      sea_form: {
        pageNum: 1,
        pageSize: 10,
        groupId: '',
        memberName: '',
        memberNo: '',
        userType: '',
        activateStatus: ''
      },
      groupType: void 0

    }
  },
  methods: {
    show(id, groupType) {
      this.sea_form.groupId = id
      this.groupType = groupType
      console.log(this.groupType, 'klklklk')
      this.getList()
      this.isshow = true
    },
    getdataBysearch() {
      this.sea_form.pageNum = 1
      // 发送获取列表请求
      this.getList()
    },
    // 重置
    resetSearch() {
      this.sea_form = {
        pageNum: 1,
        pageSize: 10,
        groupId: this.sea_form.groupId,
        memberName: '',
        memberNo: '',
        userType: '',
        activateStatus: ''
      }
      this.getList()
    },
    async getList() {
      let res = await getmemberList(this.sea_form)
      if (res.code == 200) {
        this.memberList = res.rows
        this.total = res.total
      }
    }
  }
}

</script>

<style scoped lang="scss">
.search_bar {
  padding: 10px 10px 0 10px;
  background-color: #fafafa;
  margin-bottom: 10px;

  ::v-deep .el-form-item {
    margin-bottom: 10px !important;
  }

  .search_btns {
    margin-left: 20px;
  }
}

.statuOpen {
  color: #1ab394;
}

.statuClose {
  color: #bfbdbd;
}
</style>
